<template>
    <div class="box-body">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">参加工程项目建设情况</h3>
            </div>
            <div class="box-body">
                <el-form :model="editproject" status-icon ref="editproject" label-width="160px">
                    <div class="col-sm-6">
                        <el-form-item label="项目名称">
                            <el-input :disabled="!isEditable" v-model="editproject.name" placeholder="请输入项目名称" auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                    <div class="col-sm-6">
                        <el-form-item label="项目级别">
                            <el-select :disabled="!isEditable" v-model="editproject.level" @change="value=>editproject.level = value">
                                <el-option v-for="item in this.pojectlevels" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="col-sm-6">
                        <el-form-item label="项目单位">
                            <el-input :disabled="!isEditable" v-model="editproject.depart" placeholder="请输入项目单位" auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                    <div class="col-sm-6">
                        <el-form-item label="参与形式">
                            <el-select :disabled="!isEditable" v-model="editproject.jointype" @change="value=>editproject.level = value">
                                <el-option v-for="item in this.jointypes" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="col-sm-6">
                        <el-form-item label="项目开始时间">
                            <MyDatePicker :editable="isEditable" v-bind:date="editproject.starttime" @timeChanged="time=>editproject.starttime = time"></MyDatePicker>
                        </el-form-item>
                    </div>
                    <div class="col-sm-6">
                        <el-form-item label="项目结束时间">
                            <MyDatePicker :editable="isEditable" v-bind:date="editproject.endtime" @timeChanged="time=>editproject.endtime = time"></MyDatePicker>
                        </el-form-item>
                    </div>
                    <div class="col-sm-6">
                        <el-form-item label="取得成绩">
                            <el-input :disabled="!isEditable" v-model="editproject.reward" placeholder="请输入取得成绩" auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                    <div class="col-sm-12">
                        <el-form-item label="备注">
                            <el-input :disabled="!isEditable" type="textarea" :rows="2" v-model="editproject.comment" placeholder="请输入备注信息"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import MyDatePicker from '../../mycomponents/common/MyDatePicker'
    export default {
        name: "ProjectForm",
        props: ["project", "editable"],
        data(router) {
            return {
                isEditable: false,
                editproject: {
                    level: 1,
                    name: '',
                    depart: '',
                    jointype: 1,
                    starttime: '',
                    endtime: '',
                    reward: '',
                    comment: ''
                },
                pojectlevels: [],
                jointypes: []
            }
        },
        components: {
            MyDatePicker
        },
        created: function() {
            if (this.project) {
                this.editproject = this.project;
            }
            if (this.editable != null && this.editable != undefined) {
                this.isEditable = this.editable;
            }
            this.pojectlevels = this.$store.state.sysconfigs.racelevels
            this.jointypes = this.$store.state.sysconfigs.jointypes
        },
        methods: {
            getData: function() {
                var validRes = true;
                this.$refs.editproject.validate(valid => {
                    if (valid) {
                        validRes = true;
                    } else {
                        console.log("error submit!!");
                        validRes = false;
                        return false;
                    }
                });
                console.log(" editproject:", JSON.stringify(this.editproject));
                if (!validRes) {
                    return null;
                }
                return this.editproject;
            }
        }
    };
</script>

